ஜாவாஸ்கிரிப்ட் செயல்திறன் பின்னடைவைத் தடுத்தல்: தானியங்கு செயல்திறன் சோதனை

இன்றைய வேகமான டிஜிட்டல் உலகில், வலைத்தளம் மற்றும் பயன்பாட்டின் செயல்திறன் பயனர் திருப்தி, ஈடுபாடு மற்றும் இறுதியில், வணிக வெற்றிக்கு மிக முக்கியமானது. மெதுவாக ஏற்றப்படும் அல்லது பதிலளிக்காத பயன்பாடு பயனர்களை விரக்தியடையச் செய்யலாம், பரிவர்த்தனைகளைக் கைவிடச் செய்யலாம், மேலும் உங்கள் பிராண்டின் நற்பெயரில் எதிர்மறையான தாக்கத்தை ஏற்படுத்தலாம். ஜாவாஸ்கிரிப்ட், நவீன வலை மேம்பாட்டின் ஒரு முக்கிய அங்கமாக இருப்பதால், ஒட்டுமொத்த செயல்திறனில் குறிப்பிடத்தக்க பங்கு வகிக்கிறது. எனவே, செயல்திறன் பின்னடைவுகளைத் தடுப்பது – செயல்திறனில் எதிர்பாராத குறைவுகள் – மிக முக்கியமானது. இங்குதான் தானியங்கு செயல்திறன் சோதனை முக்கியத்துவம் பெறுகிறது.

ஜாவாஸ்கிரிப்ட் செயல்திறன் பின்னடைவு என்றால் என்ன?

ஒரு புதிய குறியீடு மாற்றம் அல்லது மேம்படுத்தல் ஒரு ஜாவாஸ்கிரிப்ட் பயன்பாட்டின் செயல்திறனில் குறைவை அறிமுகப்படுத்தும் போது ஒரு செயல்திறன் பின்னடைவு ஏற்படுகிறது. இது பல்வேறு வழிகளில் வெளிப்படலாம், அவை:

• பக்க ஏற்றுதல் நேரம் அதிகரிப்பு: பக்கம் முழுமையாக ஊடாடக்கூடியதாக மாறுவதற்கு முன்பு பயனர்கள் நீண்ட நேரம் காத்திருக்கிறார்கள்.
• மெதுவான ரெண்டரிங்: காட்சி கூறுகள் திரையில் தோன்ற அதிக நேரம் எடுத்துக்கொள்கின்றன.
• குறைக்கப்பட்ட பிரேம் விகிதம்: அனிமேஷன்கள் மற்றும் மாற்றங்கள் துண்டிக்கப்பட்டதாகவும், குறைவான மென்மையாகவும் தோன்றும்.
• அதிகரித்த நினைவக நுகர்வு: பயன்பாடு அதிக நினைவகத்தைப் பயன்படுத்துகிறது, இது செயலிழப்புகள் அல்லது மெதுவான செயல்பாட்டிற்கு வழிவகுக்கும்.
• அதிகரித்த CPU பயன்பாடு: பயன்பாடு அதிக செயலாக்க சக்தியைப் பயன்படுத்துகிறது, இது மொபைல் சாதனங்களில் பேட்டரி ஆயுளைப் பாதிக்கிறது.

இந்த பின்னடைவுகள் நுட்பமானவையாக இருக்கலாம் மற்றும் கைமுறை சோதனையின் போது எளிதில் கவனிக்கப்படாமல் போகலாம், குறிப்பாக பல ஒன்றோடொன்று இணைக்கப்பட்ட கூறுகளைக் கொண்ட சிக்கலான பயன்பாடுகளில். அவை உற்பத்திக்கு அனுப்பப்பட்ட பின்னரே வெளிப்படலாம், இது அதிக எண்ணிக்கையிலான பயனர்களைப் பாதிக்கிறது.

தானியங்கு செயல்திறன் சோதனையின் முக்கியத்துவம்

தானியங்கு செயல்திறன் சோதனை, செயல்திறன் பின்னடைவுகளை உங்கள் பயனர்களை பாதிக்கும் முன் முன்கூட்டியே கண்டறிந்து சரிசெய்ய உங்களை அனுமதிக்கிறது. இது பல்வேறு செயல்திறன் அளவீடுகளை அளவிடும் மற்றும் அவற்றை முன்வரையறுக்கப்பட்ட வரம்புகள் அல்லது அடிப்படைகளுடன் ஒப்பிடும் தானியங்கு ஸ்கிரிப்ட்களை உருவாக்குவதை உள்ளடக்கியது. இந்த அணுகுமுறை பல முக்கிய நன்மைகளை வழங்குகிறது:

• முன்கூட்டியே கண்டறிதல்: மேம்பாட்டுச் சுழற்சியின் ஆரம்பத்திலேயே செயல்திறன் சிக்கல்களைக் கண்டறிந்து, அவை உற்பத்திக்குச் செல்வதைத் தடுக்கிறது.
• நிலைத்தன்மை மற்றும் நம்பகத்தன்மை: தானியங்கு சோதனைகள் நிலையான மற்றும் நம்பகமான முடிவுகளை வழங்குகின்றன, இது மனிதப் பிழை மற்றும் அகநிலைத்தன்மையை நீக்குகிறது.
• வேகமான பின்னூட்டம்: குறியீடு மாற்றங்களின் செயல்திறன் தாக்கம் குறித்த உடனடி பின்னூட்டத்தைப் பெறுங்கள், இது விரைவான மறு செய்கை மற்றும் மேம்படுத்தலை செயல்படுத்துகிறது.
• குறைக்கப்பட்ட செலவுகள்: மேம்பாட்டுச் செயல்முறையின் ஆரம்பத்திலேயே செயல்திறன் சிக்கல்களைச் சரிசெய்வது, சரிசெய்வதற்குத் தேவைப்படும் செலவு மற்றும் முயற்சியைக் கணிசமாகக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட பயனர் அனுபவம்: ஒரு நிலையான வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குங்கள், இது பயனர் திருப்தி மற்றும் ஈடுபாட்டை அதிகரிக்கிறது.
• தொடர்ச்சியான கண்காணிப்பு: தொடர்ச்சியான செயல்திறன் கண்காணிப்புக்காக உங்கள் தொடர்ச்சியான ஒருங்கிணைப்பு/தொடர்ச்சியான விநியோக (CI/CD) பைப்லைனில் செயல்திறன் சோதனைகளை ஒருங்கிணைக்கவும்.

கண்காணிக்க வேண்டிய முக்கிய செயல்திறன் அளவீடுகள்

தானியங்கு செயல்திறன் சோதனையைச் செயல்படுத்தும்போது, பயனர் அனுபவத்தை நேரடியாக பாதிக்கும் முக்கிய செயல்திறன் அளவீடுகளில் கவனம் செலுத்துவது அவசியம். சில மிக முக்கியமான அளவீடுகள் பின்வருமாறு:

• முதல் உள்ளடக்க வரைவு (FCP): திரையில் முதல் உள்ளடக்கம் (உரை, படம், போன்றவை) தோன்ற எடுக்கும் நேரத்தை அளவிடுகிறது.
• மிகப்பெரிய உள்ளடக்க வரைவு (LCP): திரையில் மிகப்பெரிய உள்ளடக்க உறுப்பு தோன்ற எடுக்கும் நேரத்தை அளவிடுகிறது.
• முதல் உள்ளீட்டு தாமதம் (FID): பயனரின் முதல் தொடர்புக்கு (எ.கா., ஒரு பொத்தானைக் கிளிக் செய்தல்) உலாவி பதிலளிக்க எடுக்கும் நேரத்தை அளவிடுகிறது.
• ஊடாடலுக்கான நேரம் (TTI): பக்கம் முழுமையாக ஊடாடக்கூடியதாகவும் பயனர் உள்ளீட்டிற்கு பதிலளிக்கக்கூடியதாகவும் மாற எடுக்கும் நேரத்தை அளவிடுகிறது.
• மொத்த தடுப்பு நேரம் (TBT): பக்க ஏற்றத்தின் போது பிரதான த்ரெட் தடுக்கப்பட்ட மொத்த நேரத்தை அளவிடுகிறது, இது உலாவி பயனர் உள்ளீட்டிற்கு பதிலளிப்பதைத் தடுக்கிறது.
• ஒட்டுமொத்த தளவமைப்பு மாற்றம் (CLS): பக்க ஏற்றத்தின் போது ஏற்படும் எதிர்பாராத தளவமைப்பு மாற்றங்களின் அளவை அளவிடுகிறது, இது காட்சி உறுதியற்ற தன்மையை ஏற்படுத்துகிறது.
• ஜாவாஸ்கிரிப்ட் செயல்படுத்தும் நேரம்: ஜாவாஸ்கிரிப்ட் குறியீட்டைச் செயல்படுத்த செலவழித்த நேரம்.
• நினைவகப் பயன்பாடு: பயன்பாட்டால் நுகரப்படும் நினைவகத்தின் அளவு.
• CPU பயன்பாடு: பயன்பாட்டால் நுகரப்படும் செயலாக்க சக்தியின் அளவு.
• நெட்வொர்க் கோரிக்கைகள்: பயன்பாட்டால் செய்யப்படும் நெட்வொர்க் கோரிக்கைகளின் எண்ணிக்கை மற்றும் அளவு.

தானியங்கு ஜாவாஸ்கிரிப்ட் செயல்திறன் சோதனைக்கான கருவிகள் மற்றும் தொழில்நுட்பங்கள்

தானியங்கு ஜாவாஸ்கிரிப்ட் செயல்திறன் சோதனையைச் செயல்படுத்த பல கருவிகள் மற்றும் தொழில்நுட்பங்களைப் பயன்படுத்தலாம். இங்கே சில பிரபலமான விருப்பங்கள்:

• WebPageTest: பல்வேறு இடங்கள் மற்றும் சாதனங்களிலிருந்து வலைத்தள செயல்திறனைச் சோதிப்பதற்கான ஒரு இலவச மற்றும் திறந்த மூலக் கருவி. இது நீர்வீழ்ச்சி விளக்கப்படங்கள், ஃபிலிம்ஸ்ட்ரிப்கள் மற்றும் கோர் வெப் வைட்டல்ஸ் அளவீடுகள் உள்ளிட்ட விரிவான செயல்திறன் அறிக்கைகளை வழங்குகிறது. WebPageTest அதன் API வழியாக தானியங்குபடுத்தப்படலாம்.
• Lighthouse: செயல்திறன், அணுகல், சிறந்த நடைமுறைகள் மற்றும் SEO ஆகியவற்றிற்காக வலைப்பக்கங்களை தணிக்கை செய்யும் கூகிளால் உருவாக்கப்பட்ட ஒரு திறந்த மூலக் கருவி. இது செயல்திறனை மேம்படுத்துவதற்கான விரிவான பரிந்துரைகளை வழங்குகிறது. Lighthouse கட்டளை வரியிலிருந்து, Chrome DevTools-இல் அல்லது ஒரு Node தொகுதியாக இயக்கப்படலாம்.
• PageSpeed Insights: உங்கள் வலைப்பக்கங்களின் வேகத்தை பகுப்பாய்வு செய்து மேம்பாட்டிற்கான பரிந்துரைகளை வழங்கும் கூகிளால் வழங்கப்படும் ஒரு கருவி. இது Lighthouse-ஐ அதன் பகுப்பாய்வு இயந்திரமாகப் பயன்படுத்துகிறது.
• Chrome DevTools: Chrome உலாவியில் உள்ளமைக்கப்பட்ட டெவலப்பர் கருவிகள், செயல்திறன் பேனல், நினைவக பேனல் மற்றும் நெட்வொர்க் பேனல் உள்ளிட்ட செயல்திறன் பகுப்பாய்வுக் கருவிகளின் விரிவான தொகுப்பை வழங்குகின்றன. இந்த கருவிகள் ஜாவாஸ்கிரிப்ட் குறியீட்டை சுயவிவரப்படுத்தவும், செயல்திறன் தடைகளைக் கண்டறியவும் மற்றும் நினைவகப் பயன்பாட்டைக் கண்காணிக்கவும் பயன்படுத்தப்படலாம். Chrome DevTools-ஐ Puppeteer அல்லது Playwright பயன்படுத்தி தானியங்குபடுத்தலாம்.
• Puppeteer மற்றும் Playwright: தலை இல்லாத Chrome அல்லது Firefox உலாவிகளைக் கட்டுப்படுத்த உயர் மட்ட API-ஐ வழங்கும் Node நூலகங்கள். உலாவி தொடர்புகளை தானியங்குபடுத்தவும், செயல்திறன் அளவீடுகளை அளவிடவும் மற்றும் செயல்திறன் அறிக்கைகளை உருவாக்கவும் அவை பயன்படுத்தப்படலாம். Playwright Chrome, Firefox மற்றும் Safari-ஐ ஆதரிக்கிறது.
• Sitespeed.io: WebPageTest, Lighthouse மற்றும் Browsertime போன்ற பல வலை செயல்திறன் கருவிகளிலிருந்து தரவைச் சேகரித்து அதை ஒரு டாஷ்போர்டில் வழங்கும் ஒரு திறந்த மூலக் கருவி.
• Browsertime: Chrome அல்லது Firefox-ஐப் பயன்படுத்தி உலாவி செயல்திறன் அளவீடுகளை அளவிடும் ஒரு Node.js கருவி.
• Jest: யூனிட் டெஸ்டிங் மற்றும் ஒருங்கிணைப்பு சோதனைக்கு பயன்படுத்தக்கூடிய ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் சோதனை கட்டமைப்பு. Jest குறியீடு துணுக்குகளின் செயல்படுத்தும் நேரத்தை அளவிடுவதன் மூலம் செயல்திறன் சோதனைக்கும் பயன்படுத்தப்படலாம்.
• Mocha மற்றும் Chai: மற்றொரு பிரபலமான ஜாவாஸ்கிரிப்ட் சோதனை கட்டமைப்பு மற்றும் உறுதிப்படுத்தல் நூலகம். இந்த கருவிகளை benchmark.js போன்ற செயல்திறன் சோதனை நூலகங்களுடன் இணைக்கலாம்.
• செயல்திறன் கண்காணிப்பு கருவிகள் (எ.கா., New Relic, Datadog, Sentry): இந்த கருவிகள் நிகழ்நேர செயல்திறன் கண்காணிப்பு மற்றும் எச்சரிக்கை திறன்களை வழங்குகின்றன, இது உற்பத்தியில் செயல்திறன் சிக்கல்களைக் கண்டறிந்து கண்டறிய உங்களை அனுமதிக்கிறது.

தானியங்கு செயல்திறன் சோதனையைச் செயல்படுத்துதல்: ஒரு படிப்படியான வழிகாட்டி

உங்கள் ஜாவாஸ்கிரிப்ட் திட்டங்களில் தானியங்கு செயல்திறன் சோதனையைச் செயல்படுத்த ஒரு படிப்படியான வழிகாட்டி இங்கே:

1. செயல்திறன் வரவுசெலவுத்திட்டங்களை வரையறுக்கவும்

ஒரு செயல்திறன் வரவுசெலவுத்திட்டம் என்பது உங்கள் பயன்பாடு கடைப்பிடிக்க வேண்டிய முக்கிய செயல்திறன் அளவீடுகளின் வரம்புகளின் தொகுப்பாகும். இந்த வரவுசெலவுத்திட்டங்கள் டெவலப்பர்களுக்கான வழிகாட்டுதல்களாக செயல்படுகின்றன மற்றும் செயல்திறன் மேம்படுத்தலுக்கான ஒரு தெளிவான இலக்கை வழங்குகின்றன. செயல்திறன் வரவுசெலவுத்திட்டங்களின் எடுத்துக்காட்டுகள்:

• பக்க ஏற்றுதல் நேரம்: 3 வினாடிகளுக்குள் பக்க ஏற்றுதல் நேரத்தை இலக்காகக் கொள்ளுங்கள்.
• முதல் உள்ளடக்க வரைவு (FCP): 1 வினாடிக்கு குறைவான FCP-ஐ நோக்கமாகக் கொள்ளுங்கள்.
• ஜாவாஸ்கிரிப்ட் பண்டல் அளவு: உங்கள் ஜாவாஸ்கிரிப்ட் பண்டல்களின் அளவை 500KB-க்கு கீழ் கட்டுப்படுத்துங்கள்.
• HTTP கோரிக்கைகளின் எண்ணிக்கை: HTTP கோரிக்கைகளின் எண்ணிக்கையை 50-க்கு கீழ் குறைக்கவும்.

உங்கள் பயன்பாட்டின் தேவைகள் மற்றும் இலக்கு பார்வையாளர்களின் அடிப்படையில் யதார்த்தமான மற்றும் அடையக்கூடிய செயல்திறன் வரவுசெலவுத்திட்டங்களை வரையறுக்கவும். நெட்வொர்க் நிலைமைகள், சாதனத் திறன்கள் மற்றும் பயனர் எதிர்பார்ப்புகள் போன்ற காரணிகளைக் கவனியுங்கள்.

2. சரியான கருவிகளைத் தேர்வு செய்யவும்

உங்கள் தேவைகளுக்கும் பட்ஜெட்டிற்கும் மிகவும் பொருத்தமான கருவிகள் மற்றும் தொழில்நுட்பங்களைத் தேர்ந்தெடுக்கவும். பின்வரும் காரணிகளைக் கவனியுங்கள்:

• பயன்படுத்த எளிதானது: கற்றுக்கொள்ளவும் பயன்படுத்தவும் எளிதான, தெளிவான ஆவணங்கள் மற்றும் ஆதரவான சமூகத்துடன் கூடிய கருவிகளைத் தேர்வு செய்யவும்.
• தற்போதுள்ள பணிப்பாய்வுகளுடன் ஒருங்கிணைப்பு: உங்கள் தற்போதுள்ள மேம்பாடு மற்றும் சோதனை பணிப்பாய்வுகளுடன் தடையின்றி ஒருங்கிணைக்கும் கருவிகளைத் தேர்ந்தெடுக்கவும்.
• செலவு: உரிமக் கட்டணங்கள் மற்றும் உள்கட்டமைப்பு செலவுகள் உள்ளிட்ட கருவிகளின் செலவைக் கவனியுங்கள்.
• அம்சங்கள்: செயல்திறன் சுயவிவரம், அறிக்கையிடல் மற்றும் எச்சரிக்கை போன்ற உங்களுக்குத் தேவையான அம்சங்களை வழங்கும் கருவிகளைத் தேர்வு செய்யவும்.

ஒரு சிறிய கருவிகளின் தொகுப்புடன் தொடங்கி, உங்கள் தேவைகள் உருவாகும்போது படிப்படியாக உங்கள் கருவித்தொகுப்பை விரிவாக்குங்கள்.

3. செயல்திறன் சோதனை ஸ்கிரிப்ட்களை உருவாக்கவும்

உங்கள் பயன்பாட்டில் உள்ள முக்கியமான பயனர் ஓட்டங்கள் மற்றும் கூறுகளின் செயல்திறனை அளவிடும் தானியங்கு சோதனை ஸ்கிரிப்ட்களை எழுதவும். இந்த ஸ்கிரிப்ட்கள் உண்மையான பயனர் தொடர்புகளை உருவகப்படுத்த வேண்டும் மற்றும் முக்கிய செயல்திறன் அளவீடுகளை அளவிட வேண்டும்.

பக்க ஏற்றுதல் நேரத்தை அளவிட Puppeteer-ஐப் பயன்படுத்தும் எடுத்துக்காட்டு:

const puppeteer = require('puppeteer');

(async () => {
 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 const url = 'https://www.example.com';

 const navigationPromise = page.waitForNavigation({waitUntil: 'networkidle0'});
 await page.goto(url);
 await navigationPromise;

 const metrics = await page.metrics();

 console.log(`Page load time for ${url}: ${metrics.timestamps.loadEventEnd - metrics.timestamps.navigationStart}ms`);

 await browser.close();
})();

இந்த ஸ்கிரிப்ட் Puppeteer-ஐப் பயன்படுத்தி ஒரு தலை இல்லாத Chrome உலாவியைத் தொடங்குகிறது, ஒரு குறிப்பிட்ட URL-க்குச் செல்கிறது, பக்கம் ஏற்றப்படும் வரை காத்திருக்கிறது, பின்னர் பக்க ஏற்றுதல் நேரத்தை அளவிடுகிறது. `waitForNavigation`-இல் உள்ள `networkidle0` விருப்பம், பக்கம் ஏற்றப்பட்டதாகக் கருதுவதற்கு முன்பு குறைந்தபட்சம் 500ms-க்கு நெட்வொர்க் இணைப்புகள் எதுவும் இல்லை என்பதை உறுதி செய்கிறது.

மற்றொரு எடுத்துக்காட்டு, Browsertime மற்றும் Sitespeed.io-ஐப் பயன்படுத்தி, கோர் வெப் வைட்டல்ஸில் கவனம் செலுத்துகிறது:

// தேவையான பேக்கேஜ்களை நிறுவவும்:
// npm install -g browsertime sitespeed.io

// சோதனையை இயக்கவும் (எடுத்துக்காட்டு கட்டளை-வரி பயன்பாடு):
// sitespeed.io https://www.example.com --browsertime.iterations 3 --browsertime.xvfb

// இந்த கட்டளை:
// 1. குறிப்பிட்ட URL-க்கு எதிராக Browsertime-ஐ 3 முறை இயக்கும்.
// 2. தலை இல்லாத சோதனைக்கு ஒரு மெய்நிகர் X சேவையகத்தை (xvfb) பயன்படுத்தும்.
// 3. Sitespeed.io முடிவுகளை ஒருங்கிணைத்து, கோர் வெப் வைட்டல்ஸ் உள்ளிட்ட ஒரு அறிக்கையை வழங்கும்.

// அறிக்கை LCP, FID, CLS மற்றும் பிற செயல்திறன் அளவீடுகளைக் காண்பிக்கும்.

இந்த எடுத்துக்காட்டு, தானியங்கு செயல்திறன் சோதனைகளை இயக்கவும் மற்றும் கோர் வெப் வைட்டல்ஸைப் பெறவும் Sitespeed.io-ஐ Browsertime-உடன் எவ்வாறு அமைப்பது என்பதைக் காட்டுகிறது. கட்டளை வரி விருப்பங்கள் sitespeed.io-உடன் ஒரு browsertime சோதனையை இயக்குவதற்கு குறிப்பிட்டவை.

4. செயல்திறன் சோதனைகளை உங்கள் CI/CD பைப்லைனில் ஒருங்கிணைக்கவும்

குறியீடு மாற்றங்கள் செய்யப்படும்போதெல்லாம் தானாகவே அவற்றை இயக்க உங்கள் செயல்திறன் சோதனைகளை உங்கள் CI/CD பைப்லைனில் ஒருங்கிணைக்கவும். இது செயல்திறன் தொடர்ந்து கண்காணிக்கப்படுவதையும், பின்னடைவுகள் முன்கூட்டியே கண்டறியப்படுவதையும் உறுதி செய்கிறது.

Jenkins, GitLab CI, GitHub Actions, மற்றும் CircleCI போன்ற பெரும்பாலான CI/CD தளங்கள், உருவாக்க செயல்முறையின் ஒரு பகுதியாக தானியங்கு சோதனைகளை இயக்குவதற்கான வழிமுறைகளை வழங்குகின்றன. உங்கள் செயல்திறன் சோதனை ஸ்கிரிப்ட்களை இயக்க உங்கள் CI/CD பைப்லைனை உள்ளமைத்து, செயல்திறன் வரவுசெலவுத்திட்டங்களில் ஏதேனும் மீறப்பட்டால் உருவாக்கத்தை தோல்வியடையச் செய்யவும்.

GitHub Actions-ஐப் பயன்படுத்தும் எடுத்துக்காட்டு:

name: Performance Tests

on:
 push:
 branches: [ main ]
 pull_request:
 branches: [ main ]

jobs:
 performance:
 runs-on: ubuntu-latest
 steps:
 - uses: actions/checkout@v2
 - name: Set up Node.js
 uses: actions/setup-node@v2
 with:
 node-version: '16'
 - name: Install dependencies
 run: npm install
 - name: Run performance tests
 run: npm run performance-test
 env:
 PERFORMANCE_BUDGET_PAGE_LOAD_TIME: 3000 # milliseconds

இந்த GitHub Actions பணிப்பாய்வு, Ubuntu-வில் இயங்கும் "performance" என்ற வேலையை வரையறுக்கிறது. இது குறியீட்டை சரிபார்த்து, Node.js-ஐ அமைத்து, சார்புகளை நிறுவி, பின்னர் `npm run performance-test` கட்டளையைப் பயன்படுத்தி செயல்திறன் சோதனைகளை இயக்குகிறது. `PERFORMANCE_BUDGET_PAGE_LOAD_TIME` சூழல் மாறி பக்க ஏற்றுதல் நேரத்திற்கான செயல்திறன் வரவுசெலவுத்திட்டத்தை வரையறுக்கிறது. `npm run performance-test` ஸ்கிரிப்ட் உங்கள் செயல்திறன் சோதனைகளை இயக்க தேவையான கட்டளைகளைக் கொண்டிருக்கும் (எ.கா., Puppeteer, Lighthouse, அல்லது WebPageTest-ஐப் பயன்படுத்தி). உங்கள் `package.json` கோப்பு `performance-test` ஸ்கிரிப்டைக் கொண்டிருக்க வேண்டும், இது சோதனைகளைச் செயல்படுத்தி, வரையறுக்கப்பட்ட வரவுசெலவுத்திட்டங்களுக்கு எதிராக முடிவுகளைச் சரிபார்த்து, வரவுசெலவுத்திட்டங்கள் மீறப்பட்டால் பூஜ்யமற்ற வெளியேறும் குறியீட்டைக் கொண்டு வெளியேறும், இது CI உருவாக்கத்தை தோல்வியடையச் செய்யும்.

5. செயல்திறன் முடிவுகளை பகுப்பாய்வு செய்து அறிக்கை செய்யவும்

மேம்பாட்டிற்கான பகுதிகளை அடையாளம் காண உங்கள் செயல்திறன் சோதனைகளின் முடிவுகளை பகுப்பாய்வு செய்யவும். செயல்திறன் அளவீடுகளைச் சுருக்கி, செயல்திறன் வரவுசெலவுத்திட்டங்களின் பின்னடைவுகள் அல்லது மீறல்களை முன்னிலைப்படுத்தும் அறிக்கைகளை உருவாக்கவும்.

பெரும்பாலான செயல்திறன் சோதனை கருவிகள் உள்ளமைக்கப்பட்ட அறிக்கையிடல் திறன்களை வழங்குகின்றன. காலப்போக்கில் செயல்திறன் போக்குகளைக் கண்காணிக்கவும், அடிப்படை செயல்திறன் சிக்கல்களைக் குறிக்கக்கூடிய வடிவங்களை அடையாளம் காணவும் இந்த அறிக்கைகளைப் பயன்படுத்தவும்.

செயல்திறன் அறிக்கையின் எடுத்துக்காட்டு (எளிமைப்படுத்தப்பட்டது):

செயல்திறன் அறிக்கை:

URL: https://www.example.com

அளவீடுகள்:
 முதல் உள்ளடக்க வரைவு (FCP): 0.8s (PASS)
 மிகப்பெரிய உள்ளடக்க வரைவு (LCP): 2.2s (PASS)
 ஊடாடலுக்கான நேரம் (TTI): 2.8s (PASS)
 மொத்த தடுப்பு நேரம் (TBT): 150ms (PASS)
 பக்க ஏற்றுதல் நேரம்: 2.9s (PASS) - வரவுசெலவுத்திட்டம்: 3.0s

ஜாவாஸ்கிரிப்ட் பண்டல் அளவு: 480KB (PASS) - வரவுசெலவுத்திட்டம்: 500KB

செயல்திறன் பின்னடைவுகள் எதுவும் கண்டறியப்படவில்லை.

இந்த அறிக்கை ஒரு குறிப்பிட்ட URL-க்கான செயல்திறன் அளவீடுகளைச் சுருக்கி, வரையறுக்கப்பட்ட செயல்திறன் வரவுசெலவுத்திட்டங்களின் அடிப்படையில் அவை தேர்ச்சி பெறுகின்றனவா அல்லது தோல்வியடைகின்றனவா என்பதைக் குறிக்கிறது. செயல்திறன் பின்னடைவுகள் ஏதேனும் கண்டறியப்பட்டதா என்பதையும் இது குறிப்பிடுகிறது. அத்தகைய அறிக்கை உங்கள் சோதனை ஸ்கிரிப்ட்களுக்குள் உருவாக்கப்பட்டு CI/CD வெளியீட்டில் சேர்க்கப்படலாம்.

6. மீண்டும் மீண்டும் செய்து மேம்படுத்தவும்

உங்கள் செயல்திறன் முடிவுகளின் பகுப்பாய்வின் அடிப்படையில், மேம்படுத்தலுக்கான பகுதிகளை அடையாளம் கண்டு, செயல்திறனை மேம்படுத்த உங்கள் குறியீட்டை மீண்டும் மீண்டும் செய்யவும். பொதுவான மேம்படுத்தல் நுட்பங்கள் பின்வருமாறு:

• குறியீடு பிரித்தல்: பெரிய ஜாவாஸ்கிரிப்ட் பண்டல்களை தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய, நிர்வகிக்கக்கூடிய துண்டுகளாக உடைக்கவும்.
• சோம்பேறி ஏற்றுதல்: முக்கியமானதல்லாத ஆதாரங்கள் தேவைப்படும் வரை அவற்றின் ஏற்றத்தைத் தாமதப்படுத்தவும்.
• பட மேம்படுத்தல்: படங்களை சுருக்கவும், பொருத்தமான பரிமாணங்களுக்கு அளவை மாற்றவும், WebP போன்ற நவீன பட வடிவங்களைப் பயன்படுத்தவும்.
• தற்காலிக சேமிப்பு: நெட்வொர்க் கோரிக்கைகளின் எண்ணிக்கையைக் குறைக்க உலாவி தற்காலிக சேமிப்பைப் பயன்படுத்தவும்.
• சிறியதாக்குதல் மற்றும் அசிங்கப்படுத்துதல்: தேவையற்ற எழுத்துக்கள் மற்றும் வெற்றிடங்களை அகற்றுவதன் மூலம் உங்கள் ஜாவாஸ்கிரிப்ட் மற்றும் CSS கோப்புகளின் அளவைக் குறைக்கவும்.
• Debouncing மற்றும் Throttling: பயனர் நிகழ்வுகளால் தூண்டப்படும் கணக்கீட்டு ரீதியாக விலையுயர்ந்த செயல்பாடுகளின் அதிர்வெண்ணைக் கட்டுப்படுத்துங்கள்.
• திறமையான அல்காரிதம்கள் மற்றும் தரவு கட்டமைப்புகளைப் பயன்படுத்துதல்: உங்கள் குறிப்பிட்ட பயன்பாட்டு நிகழ்வுகளுக்கு மிகவும் திறமையான அல்காரிதம்கள் மற்றும் தரவு கட்டமைப்புகளைத் தேர்ந்தெடுக்கவும்.
• நினைவக கசிவுகளைத் தவிர்த்தல்: உங்கள் குறியீடு இனி தேவைப்படாதபோது நினைவகத்தை சரியாக வெளியிடுவதை உறுதி செய்யவும்.
• மூன்றாம் தரப்பு நூலகங்களை மேம்படுத்தவும்: மூன்றாம் தரப்பு நூலகங்களின் செயல்திறன் தாக்கத்தை மதிப்பிட்டு, தேவைப்பட்டால் மாற்று வழிகளைத் தேர்வு செய்யவும். மூன்றாம் தரப்பு ஸ்கிரிப்ட்களை சோம்பேறி ஏற்றுவதைக் கருத்தில் கொள்ளுங்கள்.

உங்கள் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, தேவைக்கேற்ப சோதனை மற்றும் மேம்படுத்தல் செயல்முறையை மீண்டும் செய்யவும்.

ஜாவாஸ்கிரிப்ட் செயல்திறன் சோதனைக்கான சிறந்த நடைமுறைகள்

தானியங்கு ஜாவாஸ்கிரிப்ட் செயல்திறன் சோதனையைச் செயல்படுத்தும்போது பின்பற்ற வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• யதார்த்தமான சூழலில் சோதிக்கவும்: உங்கள் உற்பத்தி சூழலை நெருக்கமாக ஒத்த ஒரு சூழலில் உங்கள் செயல்திறன் சோதனைகளை இயக்கவும். இது நெட்வொர்க் நிலைமைகள், சாதனத் திறன்கள் மற்றும் சேவையக உள்ளமைவு போன்ற காரணிகளை உள்ளடக்கியது.
• ஒரு நிலையான சோதனை முறையைப் பயன்படுத்தவும்: உங்கள் முடிவுகள் காலப்போக்கில் ஒப்பிடக்கூடியவை என்பதை உறுதிப்படுத்த ஒரு நிலையான சோதனை முறையைப் பயன்படுத்தவும். இது மறு செய்கைகளின் எண்ணிக்கை, வார்ம்-அப் காலம் மற்றும் அளவீட்டு இடைவெளி போன்ற காரணிகளை உள்ளடக்கியது.
• உற்பத்தியில் செயல்திறனைக் கண்காணிக்கவும்: உற்பத்தியில் உங்கள் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணிக்க செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தவும். இது சோதனையின் போது பிடிபடாத செயல்திறன் சிக்கல்களைக் கண்டறிந்து கண்டறிய உங்களை அனுமதிக்கிறது.
• எல்லாவற்றையும் தானியங்குபடுத்துங்கள்: சோதனை εκτέλεση, முடிவு பகுப்பாய்வு மற்றும் அறிக்கை உருவாக்கம் உள்ளிட்ட செயல்திறன் சோதனை செயல்முறையின் முடிந்தவரை தானியங்குபடுத்துங்கள்.
• சோதனைகளைப் புதுப்பித்த நிலையில் வைத்திருங்கள்: குறியீடு மாற்றங்கள் செய்யப்படும்போதெல்லாம் உங்கள் செயல்திறன் சோதனைகளைப் புதுப்பிக்கவும். இது உங்கள் சோதனைகள் எப்போதும் பொருத்தமானவை என்பதையும், அவை உங்கள் பயன்பாட்டின் செயல்திறனைத் துல்லியமாக பிரதிபலிக்கின்றன என்பதையும் உறுதி செய்கிறது.
• முழு அணியையும் ஈடுபடுத்துங்கள்: செயல்திறன் சோதனை செயல்முறையில் முழு மேம்பாட்டுக் குழுவையும் ஈடுபடுத்துங்கள். இது செயல்திறன் சிக்கல்கள் குறித்த விழிப்புணர்வை ஏற்படுத்தவும், செயல்திறன் மேம்படுத்தல் கலாச்சாரத்தை வளர்க்கவும் உதவுகிறது.
• எச்சரிக்கைகளை அமைக்கவும்: செயல்திறன் பின்னடைவுகள் கண்டறியப்படும்போது உங்களுக்குத் தெரிவிக்க எச்சரிக்கைகளை உள்ளமைக்கவும். இது செயல்திறன் சிக்கல்களுக்கு விரைவாக பதிலளிக்கவும், அவை உங்கள் பயனர்களைப் பாதிப்பதைத் தடுக்கவும் உங்களை அனுமதிக்கிறது.
• உங்கள் சோதனைகள் மற்றும் செயல்முறைகளை ஆவணப்படுத்துங்கள்: உங்கள் செயல்திறன் சோதனைகள், செயல்திறன் வரவுசெலவுத்திட்டங்கள் மற்றும் சோதனை செயல்முறைகளை ஆவணப்படுத்துங்கள். இது செயல்திறன் எவ்வாறு அளவிடப்படுகிறது மற்றும் கண்காணிக்கப்படுகிறது என்பதை அணியில் உள்ள அனைவரும் புரிந்துகொள்வதை உறுதிப்படுத்த உதவுகிறது.

பொதுவான சவால்களை எதிர்கொள்ளுதல்

தானியங்கு செயல்திறன் சோதனை பல நன்மைகளை வழங்கினாலும், இது சில சவால்களையும் முன்வைக்கிறது. சில பொதுவான தடைகளை எவ்வாறு கையாள்வது என்பது இங்கே:

• நிலையற்ற சோதனைகள்: செயல்திறன் சோதனைகள் சில நேரங்களில் நிலையற்றதாக இருக்கலாம், அதாவது நெட்வொர்க் நெரிசல் அல்லது சேவையக சுமை போன்ற உங்கள் கட்டுப்பாட்டிற்கு அப்பாற்பட்ட காரணிகளால் அவை அவ்வப்போது தேர்ச்சி பெறலாம் அல்லது தோல்வியடையலாம். இதைக் குறைக்க, சோதனைகளை பலமுறை இயக்கி முடிவுகளை சராசரியாகக் கணக்கிடுங்கள். வெளிப்படுபவர்களை அடையாளம் கண்டு வடிகட்ட புள்ளிவிவர நுட்பங்களையும் நீங்கள் பயன்படுத்தலாம்.
• சோதனை ஸ்கிரிப்ட்களைப் பராமரித்தல்: உங்கள் பயன்பாடு உருவாகும்போது, உங்கள் செயல்திறன் சோதனை ஸ்கிரிப்ட்கள் மாற்றங்களைப் பிரதிபலிக்கும் வகையில் புதுப்பிக்கப்பட வேண்டும். இது நேரத்தைச் செலவழிக்கும் மற்றும் பிழை ஏற்படக்கூடிய செயல்முறையாக இருக்கலாம். இதை நிவர்த்தி செய்ய, ஒரு மட்டு மற்றும் பராமரிக்கக்கூடிய சோதனை கட்டமைப்பைப் பயன்படுத்தவும் மற்றும் சோதனை ஸ்கிரிப்ட்களை தானாக உருவாக்கி புதுப்பிக்கக்கூடிய சோதனை ஆட்டோமேஷன் கருவிகளைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.
• முடிவுகளை விளக்குதல்: செயல்திறன் சோதனை முடிவுகள் சிக்கலானதாகவும் விளக்க கடினமாகவும் இருக்கலாம். இதை நிவர்த்தி செய்ய, தெளிவான மற்றும் சுருக்கமான அறிக்கையிடல் மற்றும் காட்சிப்படுத்தல் கருவிகளைப் பயன்படுத்தவும். ஒரு அடிப்படை செயல்திறன் அளவை நிறுவி, அடுத்தடுத்த சோதனை முடிவுகளை அந்த அடிப்படைக்கு எதிராக ஒப்பிடுவதும் பயனளிக்கும்.
• மூன்றாம் தரப்பு சேவைகளைக் கையாளுதல்: உங்கள் பயன்பாடு உங்கள் கட்டுப்பாட்டிற்கு அப்பாற்பட்ட மூன்றாம் தரப்பு சேவைகளை நம்பியிருக்கலாம். இந்த சேவைகளின் செயல்திறன் உங்கள் பயன்பாட்டின் ஒட்டுமொத்த செயல்திறனைப் பாதிக்கலாம். இதை நிவர்த்தி செய்ய, இந்த சேவைகளின் செயல்திறனைக் கண்காணித்து, செயல்திறன் சோதனையின் போது உங்கள் பயன்பாட்டைத் தனிமைப்படுத்த ஏளனம் அல்லது ஸ்டப்பிங் நுட்பங்களைப் பயன்படுத்துவதைக் கருத்தில் கொள்ளவும்.

முடிவுரை

தானியங்கு ஜாவாஸ்கிரிப்ட் செயல்திறன் சோதனை ஒரு நிலையான வேகமான மற்றும் திறமையான பயனர் அனுபவத்தை உறுதி செய்வதற்கான ஒரு முக்கியமான நடைமுறையாகும். தானியங்கு சோதனைகளைச் செயல்படுத்துவதன் மூலம், செயல்திறன் பின்னடைவுகளை முன்கூட்டியே கண்டறிந்து சரிசெய்யலாம், மேம்பாட்டுச் செலவுகளைக் குறைக்கலாம் மற்றும் உயர் தரமான தயாரிப்பை வழங்கலாம். சரியான கருவிகளைத் தேர்வுசெய்து, தெளிவான செயல்திறன் வரவுசெலவுத்திட்டங்களை வரையறுத்து, உங்கள் CI/CD பைப்லைனில் சோதனைகளை ஒருங்கிணைத்து, உங்கள் பயன்பாட்டின் செயல்திறனைத் தொடர்ந்து கண்காணித்து மேம்படுத்தவும். இந்த நடைமுறைகளை ஏற்றுக்கொள்வதன் மூலம், செயல்பாட்டுக்கு മാത്രമല്ല, செயல்திறனுக்கும் உகந்த ஜாவாஸ்கிரிப்ட் பயன்பாடுகளை நீங்கள் உருவாக்கலாம், இது உங்கள் பயனர்களை மகிழ்வித்து வணிக வெற்றியைத் தூண்டும்.

செயல்திறன் என்பது ஒரு தொடர்ச்சியான செயல்முறை என்பதை நினைவில் கொள்ளுங்கள், ஒரு முறை சரிசெய்தல் அல்ல. உலகில் எங்கிருந்தாலும் உங்கள் பயனர்களுக்கு சிறந்த அனுபவத்தை வழங்க உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டைத் தொடர்ந்து கண்காணிக்கவும், சோதிக்கவும் மற்றும் மேம்படுத்தவும்.

மேலும் ஆதாரங்கள்

• Web Vitals
• Lighthouse
• WebPageTest
• Sitespeed.io
• Puppeteer
• Playwright